<template>
  <div>
    <div class="to-center" id="center-ih">
        <div class="left-box-ih">
            <h2>原型继承</h2>
            <p>
                <b>原型继承就是，实例可以使用构造函数上的prototype中的方法</b>,
                由于当一个对象没有我们需要调用的方法时，其会沿着_proto_往上层去寻找，因此我们可以利用这一点来实现继承，
            让被构造出的对象能够调用父级对象的方法
            </p>
        </div>
        <div class="right-box">
            <div class="null-ih">null</div>
            <hr id="ihr1">
            <div class="obj-ih">Object.prototype</div>
                         <hr id="ihr2">
            <div class="flex-box">
                <div class="person-ih-fun">funcation Person</div>
                <hr id="ihr3">
                <div class="person-ih">Person.prototype</div>
            </div>
                <hr id="ihr4">
        <div class="person-ih-son">person=new Person()</div>
        <div id="word1">当被创建的对象想调用一个本身不存在的方式时，就会<b>沿着原型链去父级</b>去寻找这个方法</div>
        <div id="word2">首先会去自己的父级构造函数Person的Prototype中寻找，我们可以通过<b>在构造函数的Prototype添加方法来达到继承的目的</b> </div>
        <div id="word3">如果在父级没有找到，会沿着原型链向上寻找，在Object.Prototype中寻找，这就是为什么<b>所有对象会有一些公有方法</b></div>
        <div id="word4">如果找到<b>原型链的顶层null</b> 还没有找到，就会认为没有这个方法并抛出异常</div>
        </div>
        <div id="goto">点击查看更多></div>
    </div>
</div>
</template>

<script>
import Animator from '../../animator/animator'
import anime from 'animejs'
export default {
name:'Inherit',
mounted(){
    this.beging()
    document.getElementById('center-ih').addEventListener('click',()=>{
        this.$router.push('/Summary')
    })
},
methods:{
        async  beging(){
    anime({
            targets: '.person-ih,.obj-ih,.person-ih-fun,.person-ih-son,.null-ih',
            translateX: -1200,
            duration: 800,
             easing: 'easeOutElastic(10, 2)',
            delay: anime.stagger(100) // 每个元素的延迟增加100毫秒。
            });
        document.getElementsByClassName("left-box-ih")[0].style.opacity=1;
         let beg=new Animator(1000,function(p){
            setTimeout(()=>{
                for(let i=1;i<5;i++){
              i!=3?document.getElementById("ihr"+i).style.width='200px': document.getElementById("ihr3").style.height='200px'
            }
            },2000)
        })
    await beg.animate();
        setTimeout(()=>{
         for(let i=1;i<5;i++){
                    document.getElementById('word'+i).style.opacity=1
                }
            },1200)
        }   
    }
}
</script>

<style lang="less" scoped>
#goto{
        position: absolute;
        transform: translate(-50%);
        left: 50%;
        top:680px;
           cursor:default;
        font-size: 18px;
        color:rgb(226, 222, 222)
    }
@addline:1200px;
.word{
    font-size: 16px;
    position: absolute;
    text-indent: 2em;
    left: 210px;
     width: 350px;
    opacity: 0;
    transition: 0.5s;
    transition-delay: 0.5s;
    b{
        color: #6853da
    }
}
#word1{
    .word();
       left: 120px;
    top:500px;
}
#word2{
    .word();
    top:370px;
   transition-delay: 1s;
}
#word3{
    .word();
    top:240px;
    left: 360px;
    width: 300px;
    transition-delay: 1.5s;
}
#word4{
    .word();
    top:90px;
    left: 450px;
    width: 200px;
    transition-delay: 2s;
}
.line{
    transition: 0.5s;
        height: 0px;
        width: 3px;
        border: none;
        transition: 0.5s;
        background-color: #6853da;
        opacity: 0.8;
        transform: rotate(90deg);
}
.inline(){
    .line();
    width: 0px;
      border:none;
    background-color: transparent;
  border-top:2px dotted #6853da;
    transform:rotate(-45deg);
 position: absolute;
}
#ihr1{
    top:105px;
    left:350px;
    .inline();
}
#ihr2{
    top:280px;
    left:150px;
    .inline();
}
#ihr3{
     .line();
    position: absolute;
    top:-70px;
    left:300px-@addline;
    height: 0px;
}
#ihr4{
    .inline();
    top:450px;
    left:-30px;
}
.round{
    transition: 0.8s;

    margin-bottom: 100px;
       width: 80px;
        height:60px;
        background-color: #6853da;
        font-weight: bolder;
        color:white;
        text-align: center;
        line-height: 60px;
        border-radius: 100px;
    }
hr{
    .line()
}
.to-center{
    overflow-x: hidden;
    width: 1300px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    .left-box-ih{
    display: inline-block;
    position: relative;
    opacity: 0;
    transition: 0.8s;
    transition-delay: 1s;
    left: 100px;;
    margin-top: 50px;
    h2{
        margin-bottom: 20px;
        color:#6853da;
    }
    p{
        text-indent: 2em;
        width: 300px;
        line-height: 30px;
    }
    } ;
    .right-box{
    position: relative;
    margin-top: 50px;
    .flex-box{
        position: relative;
        left: -400px+@addline;
        display: flex;
        width: 600px;
        justify-content: space-between;
    }
    position: relative;
    width:700px;
        .null-ih{
            position: relative;
            left: 400px+@addline;
            .round();
            width: 200px;
        }
        .obj-ih{
        position: relative;
        left: 200px+@addline;
        .round();
        width: 200px;
        }
        .person-ih{
        .round();
        width: 200px;
        }
        .person-ih-fun{
        .round();
        width: 200px;
        }
        .person-ih-son{
        position: relative;
        left: -170px+@addline;
        .round();
        width: 200px;
        }
    }
}
</style>
